Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.02.2014, 11:23
Интересующийся
Отправить личное сообщение для Slava-web Посмотреть профиль Найти все сообщения от Slava-web
 
Регистрация: 03.03.2013
Сообщений: 14

Ajax отправка формы без перезагрузки страници
Если форма одна на страницу, то все работает нормально.
Если таких форм n-количество на странице, то работает только первая, подскажите, как сделать, что бы работали все формы.

index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Отправка формы Ajax</title>
<script type="text/javascript" src="/jQuery.min.js"></script>
<script type="text/javascript">
	function send()
	{
		//Получаем параметры
		var data = $('#mydata').val()
		  // Отсылаем паметры
			   $.ajax({
						type: "POST",
						url: "/SendData.php",
						data: "data="+data,
						// Выводим то что вернул PHP
						success: function(html) {
		 //предварительно очищаем нужный элемент страницы
								$("#result").empty();
		//и выводим ответ php скрипта
								$("#result").append(html);
						}
				});
	}
</script>
</head>
<body>
	<form action="" id="myform">
		<input type="text" name="mydata" id="mydata" />
		<input type="button" onclick="send();" value="Отправить" />
	</form>
	
	<div id="result"></div>
</body>
</html>


SendData.php

<?php
$data = $_POST[data];
echo $data;
?>
Ответить с цитированием
  #2 (permalink)  
Старый 26.02.2014, 12:15
Аватар для deivan
Профессор
Отправить личное сообщение для deivan Посмотреть профиль Найти все сообщения от deivan
 
Регистрация: 02.08.2012
Сообщений: 293

выбросьте форму, при вашей задаче она не нужна.
и вместо <input type="button" /> используйте <button onclick="">...</button>, так православнее.
Ответить с цитированием
  #3 (permalink)  
Старый 26.02.2014, 13:04
Интересующийся
Отправить личное сообщение для Slava-web Посмотреть профиль Найти все сообщения от Slava-web
 
Регистрация: 03.03.2013
Сообщений: 14

Спасибо, но это не решение, две такие конструкции не работают

<input type="text" id="mydata" />
<button onclick="send();">Отправить</button>

<input type="text" id="mydata" />
<button onclick="send();">Отправить</button>
Ответить с цитированием
  #4 (permalink)  
Старый 26.02.2014, 13:49
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,277

Сообщение от Slava-web
Если форма одна на страницу, то все работает нормально.
Если таких форм n-количество на странице, то работает только первая
Проблема, как всегда, в ИДшниках элементов. ИД всегда должен быть уникальным на странице!!!

В твоем примере только одна форма... Покажи пример хотя бы с двумя формами.
Наверняка ты их просто копируешь 1 в 1...
Ответить с цитированием
  #5 (permalink)  
Старый 26.02.2014, 13:55
Интересующийся
Отправить личное сообщение для Slava-web Посмотреть профиль Найти все сообщения от Slava-web
 
Регистрация: 03.03.2013
Сообщений: 14

Да формы у меня одинаковые, и работает самая первая форма, ID поля которой скрипт находит первым.

<form action="" >
<input type="text" id="mydata" />
<input type="button" onclick="send();" value="Отправить" />
</form>

<form action="" >
<input type="text" id="mydata" />
<input type="button" onclick="send();" value="Отправить" />
</form>
Ответить с цитированием
  #6 (permalink)  
Старый 26.02.2014, 13:59
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,277

Сообщение от Slava-web
Да формы у меня одинаковые
Ну вот и ответ!
Сообщение от ksa
ИД всегда должен быть уникальным на странице!!!
Ответить с цитированием
  #7 (permalink)  
Старый 26.02.2014, 14:22
Интересующийся
Отправить личное сообщение для Slava-web Посмотреть профиль Найти все сообщения от Slava-web
 
Регистрация: 03.03.2013
Сообщений: 14

Спасибо, усвоил. Помогите построить конструкцию обработки (всегда уникального ИД) по моему примеру

//Получаем параметры
var data = $('#mydata').val()
Ответить с цитированием
  #8 (permalink)  
Старый 26.02.2014, 14:41
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,277

Сообщение от Slava-web
//Получаем параметры
var data = $('#mydata').val()
Есть несколько подходов...
- использовать особенность ДОМ-модели
- использовать классы + родительские элементы
- использовать параметры + "структурные" ИДшники
Ответить с цитированием
  #9 (permalink)  
Старый 26.02.2014, 15:15
Аватар для deivan
Профессор
Отправить личное сообщение для deivan Посмотреть профиль Найти все сообщения от deivan
 
Регистрация: 02.08.2012
Сообщений: 293

покажите всю форму в конце-концов, прикладная телепатия сегодня не очень работает..
Ответить с цитированием
  #10 (permalink)  
Старый 27.02.2014, 18:02
Интересующийся
Отправить личное сообщение для Slava-web Посмотреть профиль Найти все сообщения от Slava-web
 
Регистрация: 03.03.2013
Сообщений: 14

Вот уже рабочий пример jsfiddle.
Возможно кому нибудь пригодиться.
Всем спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отправка файла из формы расположеной в диалоговом окне без перезагрузки страницы ugin_root jQuery 0 04.05.2011 19:56
Подгрузка контента в определённый DIV при нажатии на ссылку, без перезагрузки страниц Flashton Events/DOM/Window 0 10.03.2010 19:53
Автоматическая отправка формы через JavaScript без использования body onload pavluxa09 Общие вопросы Javascript 0 17.11.2009 15:55
Объясните как вызывается ajax скрипт AddressBook из формы prog90 AJAX и COMET 3 06.06.2009 16:12
Автообновление <div> без перезагрузки страницы Antihrist AJAX и COMET 14 28.07.2008 06:06